<template>
  <div class="progress" style="margin-top: 10px">
    <el-card>
      <!--订单状态(0: 待付款 1: 待确认 2:待评价 3:已完成 4:无效订单 5 已关闭-->
      <el-row :gutter="10">
        <el-col :span="6" style="margin-top: 30px">
          <el-steps direction="vertical" :active="currentOrder.status"
                    :finish-status="currentOrder.status===4?'error':'success'">
            <el-step title="待付款" :description="`下一步:待确认`"></el-step>
            <el-step title="待确认" :description="`下一步:待评价`"></el-step>
            <el-step title="待评价" :description="`下一步:已完成`"></el-step>
            <el-step title="已完成"></el-step>
            <el-step title="无效订单" v-if="currentOrder.status===4"
                     :description="`以上均不完成`"></el-step>
          </el-steps>
        </el-col>
        <el-col :span="18">
          <div v-if="orderHistoryList.length>0">
            <el-timeline v-for="item in orderHistoryList" :key="item.id">
              <el-timeline-item :timestamp="item.gmtCreate" placement="top">
                <el-card>
                  <h4>订单号: {{ item.orderId }} </h4>
                  <div v-if="item.orderStatus ===0" class="ub">
                    <el-tag effect="dark">待付款</el-tag>
                    <el-link style="margin-left: 12px;font-weight: bold"
                             v-show="currentOrder.status===0" @click.prevent="toPay">去付款
                    </el-link>
                  </div>
                  <div v-else-if="item.orderStatus===1">
                    <el-tag effect="dark" type="warning">待确认</el-tag>
                    <el-link style="margin-left: 12px;font-weight: bold"
                             v-show="currentOrder.status===1" @click.prevent="toConfirm">去确认
                    </el-link>
                  </div>
                  <div v-else-if="item.orderStatus===2">
                    <el-tag effect="dark" type="info">待评价</el-tag>
                    <el-link style="margin-left: 12px;font-weight: bold"
                             v-show="currentOrder.status===2" @click.prevent="toEvaluation">去评价
                    </el-link>
                  </div>
                  <div v-else-if="item.orderStatus===3">
                    <el-tag effect="dark" type="success">已完成</el-tag>
                  </div>
                  <div v-else-if="item.orderStatus===4">
                    <el-tag effect="dark" type="danger">无效订单</el-tag>
                  </div>
                  <div v-else>
                    <el-tag effect="dark" type="danger">已关闭</el-tag>
                  </div>
                  <el-divider></el-divider>
                  <p>{{ item.memberPhone }}-{{ item.memberRealName }}: 提交于 {{ item.gmtCreate }}</p>
                  <el-divider></el-divider>
                  <!-- <sapn style="font-weight: bolder;font-size: large;margin-right: 10px">备注:</sapn>-->
                  <!-- <p> {{ item.remark === '' || item.remark === undefined ? '暂无' : item.remark }} </p>-->
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-col>
      </el-row>

    </el-card>
    <el-empty description="返回个人中心" v-if="orderHistoryList.length>0">
      <slot>
        <m-button text="返回" @click="toMemberCenter()" classStyle="main-btn"></m-button>
      </slot>
    </el-empty>
    <el-empty description="您还没有呢~" v-else>
      <slot>
        <m-button text="返回" @click="toMemberCenter()" classStyle="main-btn"></m-button>
      </slot>
    </el-empty>
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import orderHistoryApi from '../../api/orderHistory'
import { reactive, toRefs, onMounted } from 'vue'
import MButton from '../../components/MButton.vue'
import orderApi from '../../api/order'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'Progress',
  components: {
    MButton
  },
  setup () {
    const state = reactive({
      // 历史订单列表
      orderHistoryList: [],
      // 当前订单
      currentOrder: {}
    })
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    let userInfo = store.getters.userInfo
    //------------------------method start

    let orderId = route.query.orderId
    // 获取进度
    const getMemberOrderProgress = async () => {
      const res = await orderHistoryApi.getMemberOrderProgress(orderId)
      state.orderHistoryList = res.data
    }
    // 返回
    const toMemberCenter = () => {
      router.push('/member/center')
    }
    // 获取客户的当前订单信息
    const getMemberOrder = async () => {
      const res = await orderApi.getMemberOrder(orderId)
      state.currentOrder = res.data
      // console.log(res)
    }
    // 去付款
    const toPay = () => {
      ElMessageBox.confirm('确定要付款吗~', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 先判断余额是否足够
        if (userInfo.amount < state.currentOrder.totalAmount) {
          ElMessageBox.confirm('您的余额不足, 是否去充值?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            router.push('/topUp')
          }).catch(() => {
            ElMessage.warning('正在取消...')
            setTimeout(() => {
              ElMessage.success('取消付款成功')
            }, 2000)
          })
        } else {
          // 付款
          orderApi.confirmMemberOrderPay(state.currentOrder.id).then(res => {
            ElMessage.success('付款成功')
            // 刷新页面
            getMemberOrderProgress()
            getMemberOrder()
          }).catch(() => {
            ElMessage.error('付款失败')
          })
        }
      }).catch(error => {
        ElMessage.warning('正在取消...')
        setTimeout(() => {
          ElMessage.success('取消付款成功')
        }, 2000)
      })


    }
    // 去确认
    const toConfirm = () => {
      ElMessageBox.confirm('确定要确认服务已完毕吗~', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderApi.confirmMemberOrder(orderId).then(res => {
          ElMessage.success('确认已服务完毕成功')
          // 刷新页面
          getMemberOrderProgress()
          getMemberOrder()
          // 跳转评价页面
        })
      }).catch(error => {
        ElMessage.warning('正在取消...')
        setTimeout(() => {
          ElMessage.success('取消成功')
        }, 2000)
      })
    }
    // 去评价
    const toEvaluation = () => {
      router.push({
        path: '/order/evaluation',
        query: {
          orderId: state.currentOrder.id
        }
      })
    }
    //------------------------method end


    //------------------------计算属性 start


    //------------------------计算属性 end

    //------------ 钩子
    onMounted(() => {
      getMemberOrderProgress()
      getMemberOrder()

    })

    return {
      ...toRefs(state),
      toMemberCenter,
      toConfirm,
      toPay,
      toEvaluation
    }
  }
}
</script>

<style scoped lang="scss">

</style>
